<template>
    <tm-tabbar showSafe place :autoSelect="false" :active="activedIndex">
        <tm-tabbar-item @click="handleChangeTab(index)" :iconSize="36" :key="index" v-for="(item,index) in tabList" open-type="switchTab" :text="item.text"
            :icon="item.activeIcon" :unicon="item.icon" :url="item.url"></tm-tabbar-item>
    </tm-tabbar>        
</template>
<script lang="ts" setup>
    import { ref, computed, onMounted } from 'vue';
    
    import { useTabbarStore } from '@/stores/tabbar.ts'

    const tabbarStore = useTabbarStore()

    const activedIndex = computed(()=>{
        return tabbarStore.tabIndex
    })

    const tabList = computed(()=>{
        return tabbarStore.tabList
    })

    const handleChangeTab = (index)=>{
        tabbarStore.setTabIndex(index)
    }

    onMounted(() => {
        uni.hideTabBar()
    });
</script>
<style lang="less" scoped></style>